<template>
	<view class="content">
		<view class="head">
			<view class="head-box">
				<view class="">{{dataList['info']['node_id'] || '加载中...'}}</view>
				<view class="">{{dataList['info']['province'] || '加载中...'}}{{dataList['info']['city'] || '加载中...'}}-{{dataList['info']['node']}}</view>
				<view class="head-box-profit">本月收益</view>
				<view>￥0</view>
				<view class="five">
					<view class="five-one">
						<view>开始计费时间</view>
						<view>-</view>
					</view>
					<view class="five-two">
						<view>网络(<text v-if="equ_status == 1" style="color: #02bf30;">在线</text><text v-if="equ_status == 2" style="color: #ff0000;">离线</text>)</view>
						<view class="btn-jc" @tap="toflow">监控</view>
					</view>
				</view>
				<view class="head-box-remark">
					<view>
						备注:{{remark.substring(0,10)}}
					</view>
					<view style="color: #55aaff;" @tap="updateRemark()">
						编辑
					</view>
				</view>
				<view class="">
					操作: <text style="color: #55aaff;" v-if="equ_status == 1" @tap="updateInfo">信息编辑</text>
				</view>
			</view>
		</view>
		
		<view class="tabar">
			<view class="" @tap="selectIndex(1)">收益</view>
			<view class="" @tap="selectIndex(2)">硬件信息</view>
			<view class="" @tap="selectIndex(3)">网络信息</view>
		</view>
		
		<view class="profit-table" v-if="select == 1">
			<view style="background-color: #ffffff;border-radius: 20rpx;width: 750rpx;">
				<view class="profit-table-title">
					<view style="width: 800rpx;text-align: center;">日期</view>
					<!-- <view>95带宽</view> -->
					<view>收益(元)</view>
				</view>
				<view style="display: flex;padding: 20rpx;" v-for="(item,i) in log" :key="i">
					<view style="width: 524rpx;">
						<view style="font-size: 26rpx;">{{item.time}}</view>
						<view style="font-size: 26rpx;">贡献收益 {{item.profit}}元</view>
					</view>
					<!-- <view>95带宽</view> -->
					<view style="font-size: 26rpx;line-height: 68rpx;">￥{{item.profit}}</view>
					<image v-if="item.sla_reason !=='' " src="../../static/gantanhao.png" style="width: 26rpx;height: 26rpx;margin-left: 10rpx;margin-top: 20rpx;" @tap="errorinfo(item.sla_reason,item.sla)"></image>
				</view>
			</view>
			<!-- <view class="profit-table-content">
				<view></view>
				<view></view>
				<view></view>
			</view> -->
			
		</view> 
		
		 <view class="hard-table"  v-if="select == 2">
			<view  class="hard-table-info">
				<view>镜像版本</view>
				<view>CentOS Linux 7 (Core)</view>
			</view>
			<view  class="hard-table-info">
				<view>设备类型</view>
				<view>x86_64</view>
			</view>
			<view  class="hard-table-info">
				<view>CPU</view>
				<view>{{dataList['hardware']['CPUThreads'] || '--'}}核</view>
			</view>
			<view  class="hard-table-info">
				<view>内存</view>
				<view>{{(dataList['hardware']['mem']/1024/1024*1).toFixed(2) || '加载中...'}}GB</view>
			</view>
		</view>
		
		<view class="nat-table"  v-if="select == 3">
			<view  class="nat-table-info">
				<view>IP</view>
				<view>{{dataList['pressure'][0]['lines'][1]['ip'] || '--'}}</view>
			</view>
			<view  class="nat-table-info">
				<view>运营商</view>
				<view>{{dataList['info']['isp'] || '加载中...'}}</view>
			</view>
			<view  class="nat-table-info">
				<view>省市</view>
				<view>{{dataList['info']['province'] || '加载中...'}}{{dataList['info']['city'] || '加载中...'}}</view>
			</view>
			<view  class="nat-table-info">
				<view>资源类型</view>
				<view>{{dataList['basic']['resourceType'] || '加载中...'}}</view>
			</view>
			<view  class="nat-table-info">
				<view>网络类型</view>
				<view>{{dataList['basic']['natType'] || '加载中...'}}</view>
			</view>
			<view  class="nat-table-info">
				<view>拨号方式</view>
				<view>{{dataList['basic']['dialType'] || '加载中...'}}</view>
			</view>
			<view  class="nat-table-info">
				<view>拨号线路</view>
				<view style="color: #55aaff;" @tap="toLine">拨号{{dataInfo.length}}条|拨通{{success}}条|联网{{I4}}条</view>
			</view>
			<view  class="nat-table-info">
				<view>上报带宽</view>
				<view>{{dataList['basic']['usbw'] || 0}}Mbps*{{dataList['basic']['bwNum'] || 0}} = {{dataList['basic']['usbw'] * dataList['basic']['bwNum'] || 0}}Mbps <text @tap="udpateWidth" style="color: #55aaff;">调整建设带宽</text> </view>
			</view>
			<view  class="nat-table-info">
				<view>测试带宽</view>
				<view>{{dataList['basic']['usbw'] * dataList['basic']['bwNum'] || 0}}Mbps</view>
			</view>
			<view  class="nat-table-info" v-if="dataList['pressure']">
				<view>测试日期</view>
				<view>{{dataList['pressure'][0]['pressureTime']| formatDate }}</view>
			</view>
		</view>
		
		
		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				备注修改
			</view>
			<view class="content1">
				<input type="text" v-model="remark">
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal">取消</view>
				<view class="submit" @tap="comfim">确认</view>
			</view>
		</view>
		
		
		<view class="boxWidth" v-if="updateWidth"  @tap="conealupdateWidth"></view>
		
		<view class="modalWidth" v-if="updateWidth">
			<view class="title">
				修改建设带宽
			</view>
			<view class="content1">
				<view class="mt">当前建设带宽为:{{dataList['basic']['usbw'] * dataList['basic']['bwNum']}}Mbps({{dataList['basic']['usbw']}}Mbps*{{dataList['basic']['bwNum']}}),请设置目标建设带宽。</view>
				<view class="mt" style="display: flex;">
					<view style="margin-top: 20rpx;">线路数量</view>
					<input style="background-color: #f4f4f4;width: 200rpx;margin-left: 50rpx;border-radius: 10rpx;" type="text" v-model="lines" disabled="true">
				</view>	
				<view class="mt"><view style="font-size: 24rpx;margin-left: 176rpx;">检测到当前线路联通数为 {{dataList['basic']['bwNum']}}，若不符合预期请</view></view>	
				<view style="color: #55aaff;"><view style="font-size: 26rpx;margin-left: 176rpx;">调整线路</view></view>	
				<view class="mt" style="display: flex;">
					<view style="margin-top: 20rpx;">单条上行</view>
					<input style="background-color: #f4f4f4;width: 200rpx;margin-left: 50rpx;border-radius: 10rpx;" type="text" v-model="bwNum">
					<view style=" margin-left: 20rpx;margin-top: 20rpx; font-size: 24rpx;">		Mbps		总带宽：{{lines*bwNum/1000}}Gbps</view>
				</view>	
				<view class="mt">修改建设带宽需要重新压测，压测符合要求(极限带宽95%，丢包压测带宽>85%) 后，将自动调整建设带宽为目标建设带宽值。</view>	
				<view class="mt" style="font-size: 24rpx; color: #999999;">
					<view>自主调整建设带宽条件:</view>
					<view style="margin-top: 10rpx;">服务中节点在 <text style="color: #ffaa00;">0~11 点 、15~17 点</text>	可以进行自主压测调整。</view>
					<view style="margin-top: 10rpx;">每天压测次数不超过<text style="color: #ffaa00;"> 50 次。</text></view>
				</view>	
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="conealupdateWidth">暂不修改</view>
				<view class="submit" @tap="comfimupdateWidth">压测调整</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				select:1,
				eid:0,
				dataList:[],
				equ_status:0,
				success:0,
				fail:0,
				I4:0,
				I6:0,
				nums:0,
				dataInfo:[],
				show:false,
				remark:'',
				updateWidth:false,
				lines:0,
				bwNum:0,
				log:[]
			}
		},
		
		onLoad(option) {
			this.eid = option.selectID
			this.equ_status = option.status
			this.getInfo()
			this.getlines()
		},
		methods: {
			selectIndex(index){
				this.select = index
			},
			
			getInfo(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.interfaceApi('getQualityReport')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res.data
						this.log = res.data.log
						this.remark = res.data.info.remark
						this.lines = res.data.basic.bwNum
						this.bwNum = res.data.basic.usbw
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			
			getlines(){
				uni.showLoading({
					title:'记载中'
				})
				
				let	num_s = 0;
				let	num_f = 0;
				let	num_s4 = 0;
				let	num_s6 = 0;
			
				
				this.$api.interfaceApi('dialStatus')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
					
						for(var i=0;i < res.data.detail.length;i++){
							if(res.data.detail[i]['type'] ==  "manager"){
								this.manager = res.data.detail[i]
								this.dSelect = i
							}
							if(res.data.detail[i]['type'] ==  "traffic"){
								this.traffic = res.data.detail[i]
								this.dataInfo = res.data.detail[i].dialStatusInfo
								this.rSelect = i
								for(var j=0;j<res.data.detail[i].dialStatusInfo.length;j++){
									if(res.data.detail[i].dialStatusInfo[j].dialStatus == 'failed'){
										num_f++;
									}
									
									
									if(res.data.detail[i].dialStatusInfo[j].dialStatus == 'succeed'){
										num_s++;
									}
									
									if(res.data.detail[i].dialStatusInfo[j].connectStatus == 'succeed'){
										num_s4++;
									}
				
									if(res.data.detail[i].dialStatusInfo[j].ipv6ConnectStatus == 'succeed'){
										num_s6++;
									}
					
								}
							}
						}
						this.success = num_s
						this.fail = num_f
						this.I4 = num_s4
						this.I6 = num_s6
						this.info = res.data.info
						this.nodeID = res.data.info.nodeID
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			
			toflow(){
				uni.navigateTo({
					url:'/pages/equipment/niu-jiankong?id='+this.eid
				})
			},
			
			updateInfo(){
				uni.navigateTo({
					url:'/pages/equipment/update-info?eid='+this.eid
				})
			},
			
			toLine(){
				uni.navigateTo({
					url:'/pages/index/number-line?nodeID='+this.dataList['info']['node_id']
				})
			},
			
			coneal(){
				this.show = false
			},
			
			comfim(){
				if(this.remark == ''){
					uni.showToast({
						title:"名称不能为空",
						icon:"none"
					})
					return
				}
				
				this.$api.interfaceApi('updateRemark')({
					'id':this.eid,
					'remark':this.remark
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					if(res.code == 1){
						this.show = false
					}
				})
			},
			
			updateRemark(){
				this.show = true
			},
			
			conealupdateWidth(){
				this.updateWidth = false
			},
			
			comfimupdateWidth(){
				this.updateWidth = false
				uni.showLoading({
					title:'请稍等'
				})
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('addServer')({
					sys:App.globalData.sys,
					node_id:this.nodeID,
					province:this.dataList['info']['province'],
					city:this.dataList['info']['city'],
					isp:this.dataList['info']['isp'],
					usbw:this.lines,
					bwNum:this.bwNum,
					natType:this.dataList['basic']['natType'],
					dialType:this.dataList['basic']['dialType'],
					uid:userinfo.id
				}).then(result=>{
					uni.hideLoading();
					
					if(result.code == 200){
						uni.navigateTo({
							url:'/pages/index/add-result?nodeID='+this.nodeID
						})
					}else{
						uni.showToast({
							title:'修改失败',
							icon:'none'
						})
					}
				})
			},
			
			udpateWidth(){
				this.updateWidth = true
			},
			
			
		},
		
		//时间戳的处理
		filters:{
			formatDate: function(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}
			 
		},
		
		
	}
</script>

<style  lang="less">
	.content{
		
		.head{
			padding: 20rpx;
			box-sizing: border-box;
			
			.head-box{
				background-color: #FFFFFF;
				padding: 20rpx;
				box-sizing: border-box;
				
				.head-box-title{
					font-size: 28rpx;
				}
				
				.head-box-profit{
					margin-top: 20rpx;
				}
				
				.five{
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					.five-one{
						width: 50%;
					}
					
					.five-two{
						width: 50%;
						
						.btn-jc{
							width: 140rpx;
							padding: 5rpx 20rpx ;
							box-sizing: border-box;
							background-color: #55aaff;
							color: #FFFFFF;
							text-align: center;
							border-radius: 10rpx;
						}
					}
				}
				
				.head-box-remark{
					display: flex;
					justify-content: space-between;
					
					margin-top: 20rpx;
				}
			}
			
		}
		
		.tabar{
			display: flex;
			justify-content: space-between;
			
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			
			view{
				text-align: center;
				width: 33%;
			}
		}
		
		.profit-table{
			
			.profit-table-title{
				
				display: flex;
				background-color: #aaffff;
				padding: 20rpx;
				box-sizing: border-box;
				justify-content: space-between;
				font-weight: bolder;
				
				view{
					width: 33%;
				}
			}


			.profit-table-content{
				display: flex;
				padding: 20rpx;
				box-sizing: border-box;
				
				justify-content: space-between;
				font-size: 28rpx;
				
				view{
					width: 33%;
				}
			}
			
			
			.profit-table-content:nth-last-child(2n+1){
				background-color: #aaffff;
			}
			.profit-table-content:nth-last-child(2n){
				background-color: #FFFFFF;
			}
		}
		
		.hard-table{
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.hard-table-info{
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
			}
		}
		
		
		.nat-table{
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.nat-table-info{
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				
				
				view:first-child{
					font-size: 28rpx;
				}
				
				view:last-child{
					font-size: 24rpx;
				}
			}
		}
		
		
		.box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 9998;
		}
		.modal{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 70%;
			height: 260rpx;
			position: absolute;
			top: 35%;
			left: 15%;
			z-index: 9999;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.content1{
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					width: 50%;
					text-align: center;
				}
				.submit{
					color: #007AFF;
					width: 50%;
					text-align: center;
				}
			}
		}
		
		
		.boxWidth{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 9998;
		}
		.modalWidth{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 100%;
			height: 900rpx;
			position: absolute;
			top: 15%;
			left: 0%;
			z-index: 9999;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.content1{
				height: 650rpx;
				//background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
				
				.mt{
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
			.btn-group{
				display: flex;
				height: 80rpx;
				justify-content: space-between;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					border: 1rpx solid #999999; 
					border-radius: 20rpx;
					width: 40%;
					text-align: center;
					margin-left: 40rpx;
				}
				.submit{
					color: #FFFFFF;
					background: linear-gradient(to right , #00a9e1 , #0055ff);
					border-radius: 20rpx;
					width: 40%;
					text-align: center;
					margin-right: 40rpx;
				}
			}
		}
	}
</style>
